<template>
  <div class="app">
    <main>
      <div v-for="(item, index) in list" :key="index">
        <img :src="item.pic" alt />
        <h5>{{item.title}}</h5>
        <p>{{item.descript}}</p>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.$network
      .getStoreList({
        id: 1
      })
      .then(res => {
        this.list = res.data.data;
        console.log(this.list);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style scoped>
.app {
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
}
main {
  display: flex;
}
main div {
  margin: 0.3rem;
}
main img {
  width: 7rem;
  height: 4rem;
}
h5 {
  margin: 0;
}
p {
    width: 4rem;
    font-size: 0.2rem;
    color: gray;
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
}
</style>